<script setup>
import {Search} from "@element-plus/icons-vue";
import {ref, watch} from "vue";
import requestUtil from "@/utils/request";

const queryForm = ref({
  query: '',
  pageNum: 1,
  pageSize: 10,
  statusID: 2,
})

const total = ref(0)

const tableData = ref([])

const initLogsList = async () => {
  const res = await requestUtil.post('user/sys/logs', queryForm.value)
  console.log(res.data)
  tableData.value = res.data.msg
  total.value = res.data.total
}
initLogsList()

const handleSizeChange = (pageSize) => {
  queryForm.value.pageNum = 1
  queryForm.value.pageSize = pageSize
  initLogsList()
}

const handleCurrentChange = (pageNum) => {
  queryForm.value.pageNum = pageNum
  initLogsList()
}


watch(
    () => queryForm.value.statusID,
    () => {
      initLogsList()
    }
)
</script>

<template>
  <div class="app-container">
    <el-card class="box-card">
      <template v-slot:header>
        <div class="space-between">
          <div>
            <el-text class="width-class">登陆日志:</el-text>
            <el-input class="width-class" style="width: 300px" placeholder="请输入账户名称或登陆IP..."
                      v-model="queryForm.query" clearable></el-input>
            <el-button type="primary" :icon="Search" @click="initLogsList">搜索</el-button>
          </div>

          <div class="radio-container">
            <el-radio-group v-model="queryForm.statusID">
              <el-radio-button label="全部" value="2"/>
              <el-radio-button label="成功" value="1"/>
              <el-radio-button label="失败" value="0"/>
            </el-radio-group>
          </div>
        </div>
      </template>
      <el-table :data="tableData"
                stripe
                height="600px"
                style="width: 100%"
      >
        <el-table-column prop="login_time" label="时间" width="300" align="left"/>
        <el-table-column prop="username" label="用户名" width="150" align="left"/>
        <el-table-column prop="status" label="状态" width="150" align="left">
          <template v-slot="scope">
            <span v-if="scope.row.status === 0" class="el-tag el-tag--danger">失败</span>
            <span v-else class="el-tag el-tag--success">成功</span>
          </template>
        </el-table-column>
        <el-table-column prop="login_ip" label="登陆IP" width="150" align="left"/>
        <el-table-column prop="user_agent" label="User Agent" width="700" align="left"/>
        <el-table-column prop="remark" label="备注" width="200" align="left"/>
      </el-table>
    </el-card>
  </div>
  <el-pagination
      :hide-on-single-page="true"
      v-model:currentPage="queryForm.pageNum"
      v-model:page-size="queryForm.pageSize"
      :page-sizes="[10, 20, 30, 40]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
  />
</template>

<style scoped lang="scss">
.space-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 24px;

  .width-class {
    margin-right: 10px;
  }

  .radio-container {
    display: flex;
    justify-content: flex-end;

    .btn-link {
      margin-left: 20px;
      font-weight: bold;
      font-size: 26px;
    }
  }
}

.el-pagination {
  float: right;
  padding: 20px;
  box-sizing: border-box;
}

:deep(th.el-table__cell) {
  word-break: break-word;
  color: var(--text-color);
  height: 40px;
  font-size: 13px;
}

.el-tag--small {
  margin-left: 5px;
}
</style>
